<template>
  <div class="Breadcrumb">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <icon-unordered-list />
      </a-breadcrumb-item>

      <a-breadcrumb-item v-for="item in matched">
        {{ item.name }}
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script setup>
import { computed, toRaw, unref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const matched = computed(() => {
  // const name = route.name;

  // TODO 别人做的都是在meta 给每个路由加入是否需要显示面包屑
  // 但是咱们的项目感觉不用为了那点功能加这个 所有只去除根路由 root

  const filterRoot = route.matched.filter((e) => {
    return e.name != "Root";
  });

  return filterRoot
    .map((e) => {
      const meta = e.meta || {};
      if (meta.title) {
        return {
          path: e.path,
          name: meta.title
        };
      }
      if (meta.breadcrumb) {
        return { path: e.path, name: meta.breadcrumb(route) };
      }
    })
    .filter((e) => e);
});
// console.log(unref(matched), JSON.parse(JSON.stringify(route)));
</script>

<style lang="less" scoped>
.Breadcrumb {
  padding: 14px 0;
}
</style>
